<template>
  <div>
    <div class="g-clickable color empty" v-if="value === 'empty'">
      <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
        <path
          d="M222.634667 272.298667A382.4 382.4 0 0 0 138.666667 512c0 212.117333 171.904 384 384 384 90.666667 0 174.016-31.424 239.701333-83.968l-539.733333-539.733333z m60.330666-60.330667l539.733334 539.733333A382.4 382.4 0 0 0 906.666667 512c0-212.117333-171.904-384-384-384-90.666667 0-174.016 31.424-239.701334 83.968zM53.333333 512c0-259.221333 210.090667-469.333333 469.333334-469.333333 259.221333 0 469.333333 210.090667 469.333333 469.333333 0 259.221333-210.090667 469.333333-469.333333 469.333333-259.221333 0-469.333333-210.090667-469.333334-469.333333z"
          fill="var(--color)"
        ></path>
      </svg>
    </div>
    <div
      class="g-clickable color"
      v-else
      :class="{ active: active }"
      @click="change"
    >
      <div class="circle" :style="{ background: value }"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "rgb(107, 217, 233)",
    },
  },
  methods: {
    change() {
      this.$emit("change", this.value);
    },
  },
};
</script>
<style lang="scss" scoped>
.color {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  &.empty {
    svg {
      width: 20px;
    }
  }

  &.active {
    .circle {
      &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 28px;
        height: 28px;
        border-radius: 14px;
        background: inherit;
        opacity: 0.5;
        transform: translate(-50%, -50%);
      }

      &::after {
        content: "\2714";
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 10px;
        color: var(--card);
        transform: translate(-50%, -50%);
      }
    }
  }

  .circle {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    position: relative;
  }
}
</style>
